<template>
  <div class="label case childPage">
    <div class="head">
      <Header :next="'label'"/>
    </div>
    <div class="block_1 block">
      <div class="block_content">
        <div class="bc_text">
          <transition-group name="list">
            <template v-for="item in 1" v-if="block_1_text">
              <template>
                <h1 :key="item">标签生产制作及检验</h1>
                <h4 key="2" class="mt40">
                  通过直喷技术，我们在商品上直接印刷标签 能够做到一物一码，并避免了材料的浪费，高效环保。
                </h4>
              </template>
            </template>
          </transition-group>
        </div>
        <div class="bc_img">
          <el-image :src="require('@/assets/page_four/1.png')"></el-image>
          <template v-for="item in imgs_1">
            <transition :name="item.name">
              <el-image :src="item.img" class="page_1" :class="item.class" :key="item.class" v-if="block_1_text">
              </el-image>
            </transition>
          </template>
        </div>
      </div>
    </div>
    <div class="pt80">
      <h1 class="mb35">产品直印标签机器</h1>
      <h3 class="mb60">产品包装上直接印刷，省去繁杂步骤</h3>
    </div>
    <div class="img_jq">
      <div class="content">
        <el-image :src="require('@/assets/page_four/6.png')" class="img_6"></el-image>
        <el-image :src="require('@/assets/page_four/3.png')"></el-image>
      </div>
    </div>
    <div class="block_new">
      <div class="flexLc mt40 ph100">
        <div>
          <el-image :src="require('@/assets/page_four/11.png')"></el-image>
          <p>喷印前</p>
        </div>
        <div>
          <el-image :src="require('@/assets/page_four/12.png')"></el-image>
          <p>喷印后</p>
        </div>
        <div class="img_dec">
          <div class="img_div">
            <el-image :src="require('@/assets/page_four/7.png')"></el-image>
          </div>
          <h4>直喷印</h4>
          <p>支持平面，弧面、曲面各类型产品表面印制</p>
        </div>
        <div class="img_dec">
          <div class="img_div">
            <el-image :src="require('@/assets/page_four/8.png')"></el-image>
          </div>
          <h4>动态数据</h4>
          <p>数据动态连线，对位喷码，精度高、速度快</p>
        </div>
        <div class="img_dec">
          <div class="img_div">
            <el-image :src="require('@/assets/page_four/9.png')"></el-image>
          </div>
          <h4>多材料</h4>
          <p>支持PE、金属、玻璃等材质上印制</p>
        </div>
        <div class="img_dec">
          <div class="img_div">
            <el-image :src="require('@/assets/page_four/10.png')"></el-image>
          </div>
          <h4>高精度</h4>
          <p>支持3磅以上字符、二维码、图案高饱和色彩印刷</p>
        </div>
      </div>
      <div class="pt100">
        <h1 class="mb35">检验</h1>
        <h3 class="mb40">对印刷流程进行合规性检验</h3>
      </div>
      <div class="img_jy">
        <div class="img_dec">
          <div class="img_div">
            <el-image :src="require('@/assets/page_four/4.png')"></el-image>
          </div>
          <h4>前检验</h4>
          <p>针对印刷文件的检验，与数据库对文字，图案进行比对，检查是否出现错别字，遮盖，失真等</p>
        </div>
        <div class="img_dec ml160">
          <div class="img_div">
            <el-image :src="require('@/assets/page_four/5.png')"></el-image>
          </div>
          <h4>后检验</h4>
          <p>针对印刷质量检验，与印制标准进行比对，检查印刷是否出现；歪斜、拉丝、虚印等</p>
        </div>
      </div>
    </div>
    <div class="foot">
      <Footer />
    </div>
  </div>
</template>
<script>
  import Header from "@/components/header";
  import Footer from "@/components/footer";
  import $ from "jquery";
  import router from "@/router";
  export default {
    name: "web_content",
    components: {
      Header,
      Footer,
    },
    data() {
      return {
        block_1_text: false,
        imgs_1: [{
          img: require("@/assets/page_four/2.png"),
          class: "img2",
          name: "right",
        }, ],
      };
    },
    props: {},
    mounted() {
      this.block_1_text = true;
    },
    methods: {

    },
  };
</script>
<style lang="scss" scoped>
  @import "./css.scss";

  .childPage {
    .block_1 {
      .bc_text {
        width: 40%;
      }

      .bc_img {
        width: 60%;
        text-align: right;

        .img2 {
          right: 180px;
          top: 260px;
        }
      }
    }

    .img_jq {
      width: 100%;
      padding: 11rem 0 6rem;
      background: #3E3E3E;

      .content {
        width: 1300px;
        margin: auto;
        position: relative;

        .el-image {
          width: 100%;
        }

        .img_6 {
          position: absolute;
          width: 110%;
          top: -80px;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }

    .img_dec {
      text-align: left;
      margin-left: 60px;

      .img_div {
        width: 49px;
        height: 49px;
        line-height: 49px;
      }

      h4 {
        margin: 3rem 0 2rem;
        position: relative;
      }

      p {
        color: #8A8A8A;
      }
    }

    .img_jy {
      display: flex;

      .img_dec {
        width: 50%;
        margin-left: 0;

        .img_div {
          width: 100%;
          height: auto;
          border: 1px #8A8A8A dashed;
        }

        h4 {
          font-size: 25px;
        }

        p {
          font-size: 18px;
        }
      }
    }
  }
</style>